<template>
	<cl-crud @load="onLoad">
		<template #slot-top-stats>
			<commission-count ref="commission-count"></commission-count>
		</template>

		<template #slot-datepicker>
			<div class="_top-filter">
				<div style="width:125px;">
					<el-select
						size="mini"
						class="time-type"
						v-model="selects.timeType"
						@change="val => refresh({ timeType: val, page: 1 })"
					>
						<el-option label="全部" value=""></el-option>
						<el-option label="创建时间" :value="0"></el-option>
						<el-option label="付款时间" :value="1"></el-option>
						<el-option label="结算时间" :value="2"></el-option>
					</el-select>
				</div>
				<div style="width:350px;">
					<date-picker
						style="width:350px;"
						:datas="datas"
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
				<div>
					<select-taobao
						class="selects"
						v-model="selects.pid"
						@change="val => refresh({ taobaoId: val, page: 1 })"
					></select-taobao>
				</div>
				<el-button
					@click="groupExport"
					v-permission="$service.order.permission.departmentExport"
					type="primary"
					style="margin-left:10px"
					size="mini"
					><i class="el-icon-download"></i>导出报表</el-button
				>
			</div>
		</template>
	</cl-crud>
</template>

<script>
import CommissionCount from '@/components/order/commission-count';
import DatePicker from '@/components/order/date-picker';
import SelectTaobao from '@/components/order/select-taobao';
import { dateFormat, download } from '@/utils/index';
import moment from 'moment';
export default {
	data() {
		return {
			crud: null,
			selects: {
				timeType: 0,
				pid: ''
			},
			params: {
				timeType: 0,
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime]
		};
	},

	components: {
		CommissionCount,
		DatePicker,
		SelectTaobao
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.order)
				.set('dict', {
					api: {
						page: 'departmentStatistics'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: 60
						},
						{
							label: '组织',
							prop: 'departmentName',
							align: 'center',
							'class-name': 'cursor'
						},
						{
							label: '全部单数',
							prop: 'orderNum',
							align: 'center',
							sortable: true,
							emptyText: '0'
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							align: 'center',
							sortable: true,
							emptyText: '0'
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center',
							sortable: true,
							emptyText: '0'
						}
					],
					props: {
						'default-sort': {
							order: 'descending',
							prop: 'validCommission'
						}
					},
					op: {
						visible: false
					},
					on: {
						'row-click': row => {
							let newParams = {};
							if (this.params.startTime && this.params.endTime) {
								newParams = {
									startTime: this.params.startTime,
									endTime: this.params.endTime
								};
							}
							this.$emit('showdetail', {
								teamId: row.departmentId,
								title: row.departmentName,
								...newParams
							});
						}
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入组织名称'
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-datepicker', 'slot-taobao', 'flex1', 'search-key'],
					['slot-top-stats'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					this.params = params;
					const { subData, list } = await next(params);
					list.map(e => {
						e.validCommission = Number(e.validCommission);
					});
					this.$refs['commission-count'].refresh(subData);
					render(list);
				})
				.done();
			if (!(this.params.startTime && this.params.endTime)) {
				this.params = {
					...this.params,
					...dateFormat(0)
				};
			}
			app.refresh(this.params);
		},

		refresh(params) {
			if (params.startTime) {
				this.params.startTime = params.startTime;
				this.params.endTime = params.endTime;
			}
			if (params.timeType == 0) {
				params.prop = 'tkCreateTime';
			} else if (params.timeType == 1) {
				params.prop = 'tkPaidTime';
			} else if (params.timeType == 2) {
				params.prop = 'tkEarningTime';
			}
			this.crud.refresh(params);
		},
		groupExport() {
			this.$service.order.departmentExport(this.params).then(res => {
				download({
					data: res,
					fileName: `组织统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
.delete-row {
	margin-left: 10px;
	cursor: pointer;

	&:hover {
		color: red;
	}
}

._top-filter-other {
	display: flex;
	width: 100px;
	margin-left: 10px;
	line-height: 0;
}

._top-filter-other-text {
	margin-left: 2px;
}
</style>
